<template>
    <div class="container" id="app" >
        <div class="panel panel-default" >
            <div class="panel-heading" style="background-color:cyan;text-align:center">购物车</div>
            <table class="table table-bordered text-center" v-if="arr.length != 0">
                <tr>
                    <th>ID</th>
                    <th>订单编号</th>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>

                <tr v-for="(item,index) in arr">
                    <td>{{index+1}}</td>
                    <td>{{item.id}}</td>
                    <td >{{item.name}}</td>
                    <td>{{item.price}}元</td>

                    <td>
                        <div class="input-group">
                            <span class="input-group-addon" @click="sub(index)">-</span>
                            <input type="text" v-model="item.amount" class="form-control"/>
                            <span class="input-group-addon" @click="add(index)">+</span>
                        </div>
                    </td>
                    <td>{{item.amount * item.price}}元</td>
                    <td><button class="btn btn-danger" data-toggle="modal" data-target="#layer" @click="nowIndex=index">删除</button></td>
                </tr>
                <tr >
                    <td>总购买价格:</td>
                    <td colspan="5" >{{totalPrice}}元</td>
                    <td><button class="btn btn-danger" data-toggle="modal" data-target="#layer" @click="nowIndex=-2">清空购物车</button></td>
                </tr>
            </table>
            <div class="alert alert-warning" v-if="arr.length == 0" >您的购物车没有东西了，您开心吗</div>
        </div>

        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                        <h2>温馨提示😆</h2>
                        <h3 class="modal-title">您确定要删除{{nowIndex < 0?"全部商品":'商品'+arr[nowIndex].name}}吗？？</h3>
                    </div>
                    <div class="modal-body text-right">
                        <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                        <button class="btn btn-danger btn-sm" data-dismiss="modal" @click="removeM(nowIndex)">确认</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>



<script>
    import 'bootstrap/dist/css/bootstrap.min.css'
    import 'bootstrap/dist/js/bootstrap.min.js'
    export default {
        data() {
            return {
                totalPrice : 0,
                nowIndex :-10,
                arr:[
                    {"id":"Fn001","name":"iOS","price":100,"amount":2},
                    {"id":"Fn002","name":"HTML","price":20,"amount":1},
                    {"id":"Fn003","name":"JS","price":30,"amount":20},
                    {"id":"Fn004","name":"Vue","price":80,"amount":32}
                ],message:"",

            };
        },
        /*mounted() {
            this.getbiaoData();
        },*/
        methods: {
            removeM:function(index_p){
                if(index_p < 0){
                    // this.arr.splice(0,this.arr.length);
                    this.arr = [];
                }else{
                    this.arr.splice(index_p,1);
                }
                this.clac();
            },
            add : function(index_p){
                this.arr[index_p].amount++;
                this.clac();
            },
            sub : function (index_p){

                if( this.arr[index_p].amount >= 1){

                    this.arr[index_p].amount--;
                    this.clac();
                }else{
                    if(confirm("您确定删除这件商品吗?")){
                        this.arr.splice(index_p,1);
                    }
                }
            },
            clac:function(){
                this.totalPrice = 0;
                var count = this.arr.length;
                for(var i = 0; i < count;i++){
                    this.totalPrice += this.arr[i].price * this.arr[i].amount;
                }
            }
        },
    };
</script>



<style scoped>
    .colhead {
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
</style>

